<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" style="height: 100%">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>统计页面</title>
    <link rel="shortcut icon" href="favicon.ico">


    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../../resource/css/font-awesome.min.css?v=4.4.0" rel="stylesheet"
          th:href="@{/resource/css/font-awesome.min.css?v=4.4.0}"/>

    <link href="../../resource/css/animate.min.css" rel="stylesheet"
          th:href="@{/resource/css/animate.min.css?v=3.3.5}"/>
    <link href="../../resource/css/style.min.css?v=4.0.0" rel="stylesheet"
          th:href="@{/resource/css/style.min.css?v=3.3.5}"/>
    <base target="_blank">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <input id="strId" name="strId" minlength="2" type="hidden" class="form-control" th:value="${strId}"/>
    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>总人数统计</h5>
                    <div class="ibox-tools btn">
                        <i class="fa fa-refresh" onclick="statisticHelper.reload()"></i>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-pie-chart"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>阅读器在线情况</h5>
                    <div class="ibox-tools btn">
                        <i class="fa fa-refresh" onclick="statisticHelper.reload()"></i>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-pie-chart-equ"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>室内人数统计</h5>
                </div>
                <div class="ibox-content">

                    <div class="echarts" id="echarts-bar-chart"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>报警统计</h5>
                </div>
                <div class="ibox-content">

                    <div class="echarts" id="alarm_charts"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
<script src="../../resource/js/bootstrap.min.js?v=3.3.5" th:src="@{/resource/js/bootstrap.min.js?v=3.3.5}"></script>
<script src="../../resource/js/plugins/echarts/echarts-all.js"
        th:src="@{/resource/js/plugins/echarts/echarts-all.js}"></script>
<script src="../../resource/js/content.min.js?v=1.0.0" th:src="@{/resource/js/content.min.js?v=1.0.0}"></script>

<script type="text/javascript" th:inline="javascript">
    const mapBase = /*[[@{/map}]]*/ "/map";
    const dates = /*[[${dates}]]*/ ['2020-10-01', '周二', '周三', '周四', '周五', '周六', '周日'];
    const alarmData = /*[[${alarmData}]]*/ "";
</script>
<script type="text/javascript">
    $(function () {
        var strId = '[[${strId}]]';
        statisticHelper.statistic(strId);
        statisticHelper.initAlarmCharts();
        testHelper.test(strId);
        $("#strId").val(strId);
    });
    var testHelper = {
        test: function (strId) {
            $.ajax({
                url: "/equipment/count/base/station", //请求路径
                type: "post", //请求方式
                data: {
                    strId: strId
                },
                success: function (apiResult) {
                    var num = apiResult.data;
                    var total = num.unonline + num.online;
                    var l = echarts.init(document.getElementById("echarts-pie-chart-equ")), u = {
                        title: {text: "阅读器总量:" + total, x: "center"},
                        tooltip: {trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)"},
                        legend: {orient: "vertical", x: "left", data: ["离线", "在线"]},
                        calculable: !0,
                        series: [{
                            type: "pie",
                            radius: "55%",
                            center: ["50%", "60%"],
                            data: [{value: num.unonline, name: "离线"}, {value: num.online, name: "在线"}]
                        }]
                    };
                    l.setOption(u), $(window).resize(l.resize);
                },
                error: function () {

                },
                dataType: "json" //服务器响应的数据格式
            });

        }
    }
    var statisticHelper = {
        totalCount: [],
        specialCount: [],
        totalHandled: [],
        ignoreCount: [],
        reload: function () {
            statisticHelper.statistic($("#strId").val());
            testHelper.test($("#strId").val());
        },
        statistic: function (sId) {
            $.ajax({
                url: mapBase + "/statistics", //请求路径
                type: "post", //请求方式
                data: {
                    structureId: sId
                },
                success: function (apiResult) {
                    //柱状图参数
                    var x = [];
                    var y = [];
                    var i = 0;
                    var total = 0;
                    var title = "";

                    //饼图参数
                    var pieTitle = 0;
                    var pieX = [];
                    var pieY = [];
                    $.each(apiResult.data, function (i, item) {
                        if (i == 0) {
                            i++;
                            title = item.name;
                            pieTitle = item.name + "总人数:" + item.count;
                        } else {
                            if (item.type == "室内") {
                                x.push(item.name);
                                y.push(item.count);
                                total = total + item.count;
                            }
                            if (item.type != null && item.type != "") {
                                if (pieX.indexOf(item.type) == -1) {
                                    pieX.push(item.type);
                                }
                                if (pieY.length == 0) {
                                    pieY.push({value: item.count, name: item.type});
                                } else {
                                    var len = 0;
                                    pieY.forEach(pieItem => {
                                        if (pieItem.name == item.type) {
                                            pieItem.value = pieItem.value + item.count;
                                            return;
                                        }
                                        len = len + 1;
                                    })
                                    if (len == pieY.length) {
                                        pieY.push({value: item.count, name: item.type});
                                    }
                                }
                            }
                        }
                    });
                    title = title + "室内人数:" + total;

                    var l = echarts.init(document.getElementById("echarts-pie-chart")), u = {
                        title: {text: pieTitle, x: "center"},
                        tooltip: {trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)"},
                        legend: {orient: "vertical", x: "left", data: pieX},
                        calculable: !0,
                        series: [{
                            name: "访问来源",
                            type: "pie",
                            radius: "55%",
                            center: ["50%", "60%"],
                            data: pieY
                        }]
                    };
                    l.setOption(u), $(window).resize(l.resize);

                    var t = echarts.init(document.getElementById("echarts-bar-chart")), n = {
                        title: {text: [title]},
                        tooltip: {trigger: "axis"},
                        grid: {x: 30, x2: 40, y2: 24},
                        calculable: !0,
                        xAxis: [{
                            type: "category",
                            data: x
                        }],
                        yAxis: [{type: "value"}],
                        series: [{
                            name: "人数",
                            type: "bar",
                            data: y,
                            markPoint: {data: [{type: "max", name: "最大值"}, {type: "min", name: "最小值"}]}
                        }]
                    };
                    t.setOption(n), window.onresize = t.resize;
                },
                error: function () {

                },
                dataType: "json" //服务器响应的数据格式
            });

        },
        initAlarmData: function () {
            let self = this;
            // let data1Json = JSON.parse(data1);
            $.each(alarmData, function (o, item) {
                self.totalCount.push(item.totalCount);
                self.specialCount.push(item.specialCount);
                self.totalHandled.push(item.totalHandled);
                self.ignoreCount.push(item.ignoreCount);
            })
        },
        initAlarmCharts: function () {
            let self = this;
            self.initAlarmData();
            let chart = echarts.init(document.getElementById('alarm_charts'));

            let option = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['警报总数', '特殊警报', '已处理', '警报解除']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {}
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: dates
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '警报总数',
                        type: 'line',
                        data: self.totalCount
                    },
                    {
                        name: '特殊警报',
                        type: 'line',
                        data: self.specialCount
                    },
                    {
                        name: '已处理',
                        type: 'line',
                        data: self.totalHandled
                    },
                    {
                        name: '警报解除',
                        type: 'line',
                        data: self.ignoreCount,
                        itemStyle: {
                            normal: {
                                color: '#3CB371', //改变折线点的颜色
                                lineStyle: {
                                    color: '#3CB371' //改变折线颜色
                                }
                            }
                        },
                    }
                ]
            };
            chart.clear();
            chart.setOption(option);
        }
    }
</script>
</body>
</html>